From Abstraction to Realization

Prototypes One of the truly powerful tools in usage-centered design is the abstract prototype [Constantine, 1998; Constantine & Lockwood, 1999]. An abstract prototype allows designers to describe the contents and overall organization of a user interface without specifying its detailed appearance or behavior; it is, thus, a model of the architecture of the user interface being designed. We and our clients have found that abstract prototypes provide an effective bridge between task models based on task cases (essential use cases) and a final design in the form of a realistic prototype, whether on paper or in software. In particular, by maintaining a focus on content, organization, and function independent of layout, appearance, and behavior, abstract prototypes have repeatedly been found to encourage both sound architecture and creative innovation [Constantine, 1998]. Driven by an appropriate task model, abstract prototypes help designers to devise user interface solutions that are both practical and novel [Constantine, 2000]. ∗ Director of Research, Constantine & Lockwood, Ltd., and Professor of Computing Science, University of Technology, Sydney (Australia) † Director, Usability Competence Center, Siemens AG ‡ Lecturer, University of Victoria, Wellington (New Zealand) and Consulting Associate, Constantine & Lockwood, Ltd. ¶ President, Constantine & Lockwood, Ltd. Constantine & Lockwood, Ltd. Working Paper: Abstraction to Realization page 2 State of the Abstract Art In its most common form in usage-centered design, an abstract prototype consists of a content model and a navigation map. The content model comprises a series of views (interaction contexts) populated with abstract components, that is, with the tools and materials needed for users to perform the tasks being supported within each view. The navigation map complements the content model showing the possible paths or transitions interconnecting all the views (interaction contexts) in the user interface. In a conventional content model, each view is usually represented by a separate, labeled piece of paper onto which abstract components are posted, typically in the form of sticky-notes. Where the distinction makes sense, simple glyphs (small icons) are employed to distinguish materials, which represent the containers and information of interest to users, from the tools that operate on these materials or perform other actions for users. An example of a conventional abstract prototype is shown in Figure 1. Standard test running test list configuration display print option setter test changer test starter status display test stopper Figure 1 – Example of conventional (fully) abstract prototype. Other variations of abstract prototypes include “wire -frame” mockups and abstract layout diagrams. Wire -frame mockups, such as the one shown in Figure 2, represent the relative size and position of visual user interface elements. Color-coding of the areas may also be used to indicate the type of element represented or the relative importance or priority of the information or function. This latter variation has enjoyed some popularity among graphic designers for Web-based applications. Working Paper: Abstraction to Realization page 3 Store Home Page Store Home Page Logo bar Left navigation channel Manager’s specials New listings